<template>
    <RouterView />
</template>

<script setup lang="ts"></script>

<style lang="scss">
    html {
        margin: auto;
        max-width: $maxWidth;
        height: 100%;
        // font-size: 100vw;
        font-size: 10vw;
        font-family: -apple-system, system-ui, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB,
            Microsoft YaHei, Arial, sans-serif;

        @include MaxWidth() {
            font-size: calc((#{$maxWidth} - 17px) / 10);
        }
    }
    body {
        margin: auto;
        max-width: $maxWidth;
        height: 100%;
        font-size: 30px;
        -webkit-text-size-adjust: none !important;
    }

    code {
        font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
    }

    #app {
        height: 100%;
    }

    .music-btn {
        width: 54px;
        height: 54px;
        position: fixed;
        z-index: 99999;
        right: 30px;
        top: 20px;
        animation: around 3000ms linear 0s infinite forwards;
        animation-play-state: paused;
        &.playing {
            animation-play-state: running;
        }
        @include MaxWidth {
            right: calc((100vw - $maxWidth) / 2 + 15px);
        }
    }

    @keyframes around {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    .modify-dialog {
        .van-dialog__content {
            padding: 0 48px 48px;
            margin-top: 64px;
            .van-field {
                border: 1px solid #0d86ff;
                border-radius: 8px;
            }
        }
        .submit-modify {
            height: 90px;
            background: linear-gradient(270deg, #076dff 0%, #26a5ff 100%);
            border-radius: 8px;
            width: 100%;
            border: none;
            color: #fff;
            font-size: 32px;
            margin-top: 32px;
        }
    }
</style>
